<template>
  <div class="container1">
    <div class="left">
      <div class="top2_3">
        
      </div>
      <div class="bottom2_3">
        <p>随机森林中有许多的分类树。我们要将一个输入样本进行分类，我们
          需要将输入样本输入到每棵树中进行分类。打个形象的比喻：森林中召
          开会议，讨论某个动物到底是老鼠还是松鼠，每棵树都要独立地发表自
          己对这个问题的看法，也就是每棵树都要投票。该动物到底是老鼠还是
          松鼠，要依据投票情况来确定，获得票数最多的类别就是森林的分类结
          果。
         </p>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <el-form :model="form" label-width="60px">
          <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
            <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
              <el-form-item label="统筹M">
                <el-input v-model="form.input1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="药品金">
                <el-input v-model="form.input2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
            <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
              <el-form-item label="审批金">
                <el-input v-model="form.input3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="ALL_SUM">
                <el-input v-model="form.input4"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
            <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
              <el-form-item label="统筹A">
                <el-input v-model="form.input5"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="药品A">
                <el-input v-model="form.input6"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
            <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
              <el-form-item label="药品费">
                <el-input v-model="form.input7"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="就诊数">
                <el-input v-model="form.input8"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20"> <!-- el-row 用于创建一个行容器，并设置间隔为20px -->
            <el-col :span="12"> <!-- el-col 用于创建列，span 属性表示该列占据的栅格数 -->
              <el-form-item label="支付金">
                <el-input v-model="form.input9"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="就诊天">
                <el-input v-model="form.input10"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>


        <!--提交按钮-->
        <div style="display: flex; justify-content: center;">
          <el-button type="primary" @click="pred" round>预测</el-button>
        </div>
      </div>
      <div class="bottom">
        <p class="pp">点击此按钮，批量上传数据，进行批量分类</p>
        <el-upload
          class="upload-demo"
          action="http://127.0.0.1:5000/up_file/"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
        >
          <el-button size="small" type="primary">Click to Upload</el-button>
        </el-upload>
      </div>
    </div>
  </div>

      <!-------------------------------对话框1------------------------------------>
      <el-dialog v-model="dialogTableVisible" title="批量预测" width="700">
        <el-table :data="gridData">
          <el-table-column property="id" label="用户编号" width="500" />
          <el-table-column property="res" label="预测结果" width="200" />
        </el-table>
      </el-dialog>
  
      <!-------------------------------对话框1------------------------------------>
  
</template>

<script lang="ts">
import { defineComponent, ref, toRefs} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'

import axios from '@/axios';
export default defineComponent({
  setup() {
    const form = ref({
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',     
        input6: '',
        input7: '',
        input8: '',
        input9: '',
        input10: '',
      });

    const dialogTableVisible = ref(false);
    const showDialog = () => {
      dialogTableVisible.value = true;
    };
    const gridData = ref([]);

    const beforeUpload = (file: any) => {
    // Perform validation before upload
    let isAllowed = true; // 根据需要设置条件

    if (!isAllowed) {
      alert("Error: The file is not allowed."); // 弹出警告
      return false;
    }
    return true;
  };

    const handleSuccess = (response: any, file: any) => {
    // Handle upload success
    if (response.code === 101) {
      axios.post('/pred')
        .then((response) => {
          // Assuming response.data is an array of objects representing the table data
          gridData.value = response.data; // Fill the gridData with the response data
          dialogTableVisible.value = true; // Show the dialog
        })
        .catch((error) => {
          console.error('Error fetching prediction data:', error);
        });
    }
  };

  const pred = () => {
    const inputs = [
      form.value.input1,
      form.value.input2,
      form.value.input3,
      form.value.input4,
      form.value.input5,
      form.value.input6,
      form.value.input7,
      form.value.input8,
      form.value.input9,
      form.value.input10
    ];
    axios.post('/pred_yi',{
      data:inputs
      }).then((response) => {
          // Assuming response.data is an array of objects representing the table data
          var res="正常"
          if(response.data.result!=0){
            res="欺诈行为"
          }
          ElMessageBox.confirm(
              '该数据的预测分类结果为'+response.data.result+',('+res+')',
              'Detail',
              {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'success',
              }
            )
              .then(() => {
                ElMessage({
                  type: 'success',
                  message: '已清空输入框数据，如需预测请继续输入',
                })
                form.value.input1 = '';
                form.value.input2 = '';
                form.value.input3 = '';
                form.value.input4 = '';
                form.value.input5 = '';
                form.value.input6 = '';
                form.value.input7 = '';
                form.value.input8 = '';
                form.value.input9 = '';
                form.value.input10 = '';
              })
              .catch(() => {
                ElMessage({
                  type: 'info',
                  message: '已清空你的数据，如需预测请继续输入',
                })
                form.value.input1 = '';
                form.value.input2 = '';
                form.value.input3 = '';
                form.value.input4 = '';
                form.value.input5 = '';
                form.value.input6 = '';
                form.value.input7 = '';
                form.value.input8 = '';
                form.value.input9 = '';
                form.value.input10 = '';
              })
        })
        .catch((error) => {
          console.error('Error:', error);
        });
  };

  return {
      dialogTableVisible,
      showDialog,
      gridData,
      beforeUpload,
      handleSuccess,
      pred,
      form
    };
  },
  
});


</script>

<style>
/* 全局样式 */
:root {
--primary-color: #409eff;
--secondary-color: #67c23a;
--background-color: #f5f5f5;
--text-color: #333;
--border-color: #dcdfe6;
}

.pp{
display: flex;
justify-content: center;
align-items: center;
}

/* 容器样式 */
.container1 {
display: flex;
flex-direction: row;
height: 590px;
width: 100%;
max-width: 1100px; /* 设置最大宽度 */
margin: 50px auto; /* 居中显示 */
background-color: var(--background-color);
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 左侧和右侧样式 */
.left, .right {
flex: 1;
padding: 20px;
background-color: white;
border-radius: 8px;
margin: 0 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
width: 500px;
}

/* 顶部和底部样式 */
.top, .bottom {
padding: 20px;
border: 1px solid var(--border-color);
margin-bottom: 20px; /* 根据需要调整空隙大小 */
}
.top2_3, .bottom2_3 {
  padding: 20px;
  border: 1px solid var(--border-color);
  margin-bottom: 20px; /* 根据需要调整空隙大小 */
  }
/* 容器内部的顶部样式（增加） */
.top2_3 {
  flex-grow: 1; /* 让.top根据可用空间增长 */
  min-height: 270px; /* 根据需要调整最小高度 */
  background-image: url('../../picku/rf1.png'); /* 替换为您的图片URL */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  }

.top {
flex-grow: 1; /* 让.top根据可用空间增长 */
min-height: 270px; /* 根据需要调整最小高度 */
}

/* 容器内部的底部样式（可选） */
.bottom {
min-height: 150px; /* 根据需要调整最小高度 */
}
.bottom2_3 {
  min-height: 150px; /* 根据需要调整最小高度 */
}
/* 表单样式 */
.el-form {
width: 100%;
}

.el-form-item {
margin-bottom: 20px;
}

.el-input__inner {
border-radius: 4px;
padding: 10px 15px;
}

/* 上传样式 */
.upload-demo {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

.el-button {
border-radius: 4px;
padding: 10px 20px;
font-size: 14px;
background-color: var(--primary-color);
color: white;
border: none;
transition: background-color 0.3s;
}

.el-button:hover {
background-color: darken(var(--primary-color), 10%);
}

/* 响应式设计 */
@media (max-width: 768px) {
.container1 {
  flex-direction: column;
}

.left, .right {
  margin: 10px 0;
}
}
</style>
